<script setup>
import { ref } from "vue";
const value = ref('总部仓库');
const columns = ref([
  { text: '总部仓库', value: '总部仓库' },
  { text: '广州仓库', value: '广州仓库' },
  { text: '其他仓库', value: '其他仓库' }
]);
const showPicker = ref(false);
const isClickFn = () => {
  showPicker.value = true;
};
const onConfirm = (selectedValue) => {
  value.value = selectedValue.selectedValues[0];
  showPicker.value = false;
};
</script>

<template>
  <div class="style1 p-[5px]">
    <van-field
        required
        readonly
        clickable
        name="picker"
        v-model="value"
        label="选择仓库"
        placeholder="点击选择仓库"
        :rules="[{ required: true, message: '请选择仓库' }]"
        @click="isClickFn"
    />
  </div>
  <van-popup v-model:show="showPicker" position="bottom">
    <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
    />
  </van-popup>
</template>

<style scoped>
</style>